<script setup>
import { ref, onActivated,getCurrentInstance } from "vue";
import { useRoute, useRouter } from "vue-router";
import { cureList } from "@/utils/constClass.js";
import { getPageCourse } from "@/api/EngageManagement/cureManagement.js";
import { useDistInfoStore } from "@/stores/dict.js";
import TabelBrand from "@/components/TableComponents/Brand.vue";
import { getDistInfo } from "@/api/Other";
const seachTable = ref(null);
const route = useRoute();
const router = useRouter();
const instance = getCurrentInstance();
// 新增编辑回退时候刷新列表
const distInfoStore = useDistInfoStore();
const formInline = ref([
  {
    type: "datePicker",
    prop: ["startDate", "endDate"],
    startPlaceholder: "创建开始时间",
    endPlaceholder: "创建结束时间",
    label: "",
    model: [],
  },
  {
    type: "input",
    prop: "fuzzyValue",
    placeholder: "疗程名称/编号/助记码",
    label: "",
    model: "",
  },
  {
    type: "select",
    placeholder: "经营品牌",
    label: "",
    prop: "businessBrandId",
    multiple: true,
    isString: true,
    data: [],
    loading: false,
    model: "",
  },
  {
    type: "select",
    placeholder: "销售状态",
    filterable: true,
    label: "",
    prop: "salesState",
    data: cureList,
    model: "",
    width: 180,
  },
  {
    type: "input",
    prop: "createByName",
    placeholder: "创建人",
    label: "",
    model: "",
    width: 180,
  },
]);

const btnLefts = ref([
  {
    label: "新增疗程",
    type: "primary",
    show: () => true,
    img: new URL("@/assets/icon/btn-add.png", import.meta.url),
    click: () => {
      router.push({ name: "CureManagementAdd" });
    },
  },
]);
const btnRights = ref([]);

const tableConfig = ref([
  {
    prop: "code",
    label: "疗程编号",
    type: "slot",
    slotName: "code",
    width: 150,
  },
  {
    prop: "courseName",
    label: "疗程名称",
    type: "slot",
    slotName: "courseName",
    width: 310,
  },
  {
    prop: "businessBrandId",
    label: "经营品牌",
    width: 150,
    type: "slot",
    // textOverflow: true,
    slotName: "businessBrandId",
  },
  {
    prop: "courseTimes",
    label: "疗程次数",
    width: 100,
    // type: "slot",
    // slotName: "times",
  },
  {
    prop: "productNum",
    label: "包含产品种类",
    width: 120,
    type: "slot",
    slotName: "productNum",
  },
  {
    prop: "projectNum",
    label: "包含项目种类",
    width: 120,
    type: "slot",
    slotName: "projectNum",
  },

  {
    prop: "retailPrice",
    label: "零售价",
    width: 100,
  },

  {
    prop: "salesState",
    label: "销售状态",
    width: 100,
    type: "slot",
    slotName: "salesState",
  },

  {
    prop: "createByName",
    label: "创建人",
    width: 100,
  },
  {
    prop: "createTime",
    label: "创建时间",
    width: 200,
  },
  {
    prop: "updateTime",
    label: "最近更新",
    width: 200,
  },

  {
    type: "action",
    label: "操作",
    width: 200,
    btns: [
      {
        label: () => "编辑",
        type: "success",
        click: async (row) => {
          router.push({ name: "CureManagementEdit", query: { id: row.id } });
        },
      },
      {
        label: () => "查看",
        type: "primary",
        click: async (row) => {
          router.push({
            name: "CureManagementInfo",
            query: { id: row.id },
          });
        },
      },
    ],
  },
]);
const tableLoading = ref(false);
const totalPage = ref(0);
const tableData = ref([]);

const handlerSearch = async (formInline) => {
  tableLoading.value = true;
  try {
    const { total, records } = await getPageCourse(formInline);
    totalPage.value = Number(total);
    tableData.value = records;
    tableLoading.value = false;
  } catch (e) {
    tableLoading.value = false;
  }
};
const goToDetail = (id) => {
  router.push({ name: "CureManagementInfo", query: { id } });
};
onActivated(async () => {
  formInline.value[2].loading = true;
  const brandRes = await getDistInfo({permissionType:3});
  formInline.value[2].data = brandRes[0].groupData.map((v) => ({
    label: v.permissionName,
    value: v.id,
  }));
  formInline.value[2].loading = false;

  let closeTagName = sessionStorage.getItem("closeTagName");
  if (closeTagName == "CureManagementEdit") {
    //编辑退回时
    seachTable.value.handlerSearch(); //刷新当前页
  } else if (closeTagName == "CureManagementAdd") {
    //新增退回时
    seachTable.value.initSearch(); //返回第一页并刷新
  }
  instance.proxy.$forceUpdate(); //重新渲染demo
  sessionStorage.removeItem("closeTagName"); //溢出缓存中的tag名
});
</script>
<template>
  <div class="page-content">
    <SeachTable
      :tableType="1"
      ref="seachTable"
      :forms="formInline"
      :btnLefts="btnLefts"
      :btnRights="btnRights"
      :tableLoading="tableLoading"
      :tableConfig="tableConfig"
      :tableData="tableData"
      :totalPage="totalPage"
      @handlerSearch="handlerSearch"
    >
      <template #code="{ row }">
        <div class="a-link" @click="goToDetail(row.id)">{{ row.code }}</div>
      </template>
      <template #productNum="{ row }">
        <span v-if="!row.productNum"> 0</span>
        <el-popover
          v-else
          placement="right"
          :width="256"
          trigger="hover"
          :popper-style="'padding:8px'"
        >
          <template #reference>
            <span class="a-link">{{ row.productNum }}</span>
          </template>
          <div class="bhcpzlClass">
            <div
              class="bhcpzlClassItem"
              v-for="item in row.productList"
              :key="item.id"
            >
              <img class="bhcpzlClassimg" :src="item.commodityPicture" />
              <div class="ml8 w100">
                <div class="head_title">{{ item.commodityName }}</div>
                <div
                  class="content_title flex1 flex align-items-center justify-content-between"
                >
                  <div>{{ item.commodityCode }}</div>
                  <div>x {{ item.times }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-popover>
      </template>
      <template #projectNum="{ row }">
        <span v-if="!row.projectNum">0</span>
        <el-popover
          v-else
          placement="right"
          :width="256"
          trigger="hover"
          :popper-style="'padding:8px'"
        >
          <template #reference>
            <span class="a-link">{{ row.projectNum }}</span>
          </template>
          <div class="bhcpzlClass">
            <div
              class="bhcpzlClassItem"
              v-for="item in row.projectList"
              :key="item.id"
            >
              <img class="bhcpzlClassimg" :src="item.commodityPicture" />
              <div class="ml8 w100">
                <div class="head_title">{{ item.commodityName }}</div>
                <div
                  class="content_title flex1 flex align-items-center justify-content-between"
                >
                  <div>{{ item.commodityCode }}</div>
                  <div>x1</div>
                </div>
              </div>
            </div>
          </div>
        </el-popover>
      </template>
      <template #courseName="{ row }">
        <div class="project_info">
          <div class="img">
            <el-image
              :src="row.firstPicture"
              lazy
              :preview-src-list="[row.firstPicture]"
              :initial-index="0"
              style="width: 100%; height: 100%"
              preview-teleported
              hide-on-click-modal
            />
          </div>
          <el-tooltip placement="top" v-if="row.courseName?.length > 26">
            <template #content
              ><div class="name_info">
                {{ row.courseName }}
              </div>
            </template>
            <div class="name_info uni-ellipsis">
              {{ row.courseName }}
            </div>
          </el-tooltip>
          <div v-else class="name_info uni-ellipsis">
            {{ row.courseName }}
          </div>
        </div>
      </template>
      <template #businessBrandId="{ row }">
        <TabelBrand
          :id="item"
          v-for="(item,index) in row.businessBrandId.split(',')"
          :key="item"
          :index="index"
          :origin="row.businessBrandId.split(',')"
          :list="formInline[2].data"
        ></TabelBrand>
      </template>
      <!-- <template #times="{ row }">
        <div v-if="row.productList.length">
          {{ row.productList.map((v) => v.times).reduce((a, b) => a + b) }}
        </div>
        <div v-else>-</div>
      </template> -->
      <template #salesState="{ row }">
        {{ cureList.find((v) => v.value == row.salesState)?.label || "-" }}
      </template>
    </SeachTable>
  </div>
</template>
<style lang="less" scoped>
.a-link {
  color: #3480ff;
  font-size: 14px;
  cursor: pointer;
}
.project_info {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .img {
    width: 48px;
    height: 48px;
  }
  .name_info {
    flex: 1;
    box-sizing: border-box;
    padding-left: 8px;
    color: #222222;
    font-weight: bold;
    font-size: 14px;
  }
}
.bhcpzlClass {
  // padding: 8px;
  max-height: 300px;
  overflow: auto;
}
.bhcpzlClassimg {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}
.bhcpzlClassItem {
  padding: 8px;
  display: flex;
  align-items: center;
  background: #f6f6f6;
  border-radius: 8px;
  margin-bottom: 8px;
  &:last-child {
    margin-bottom: 0px;
  }
  .head_title {
    color: #3480ff;
    font-size: 14px;
    font-weight: 500;
  }
  .content_title {
    color: #666666;
    font-size: 14px;
    font-weight: 400;
  }
}
</style>
